<template>
  <div class="departments">
    <el-card style="width: 100%">
      <template #header>
        <div>组织架构</div>
      </template>
      <div style="width: 80%; margin: 0 auto">
        <!-- <div class="item">
          <div class="name">江苏传智播客</div>
          <div class="manager">负责人</div>
          <el-dropdown class="dropdown">
            <span>
              <span>操作</span>
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item> 添加子部门 </el-dropdown-item>
                <el-dropdown-item> 查看部门 </el-dropdown-item>
                <el-dropdown-item> 删除部门 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div> -->
        <tree-item :item="topInfo" style="width: 100%" />
        <hr>
        <el-tree
          :data="treeData"
          :props="{ label: 'name', children: 'children' }"
        >
          <template v-slot="{ data }">
            <tree-item :item="data" style="width: 100%" @getData="getData">
              <!-- <div class="item" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown class="dropdown">
                <span>
                  <span>操作</span>
                  <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item> 添加子部门 </el-dropdown-item>
                    <el-dropdown-item> 查看部门 </el-dropdown-item>
                    <el-dropdown-item> 删除部门 </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div> -->
            </tree-item></template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增部门对话框 -->
    <Add :init-tree-data="initTreeData" @getData="getData" />
  </div>
</template>
<script>
import { companydepartment } from '@/api/departments.js'
import TreeItem from './components/treeItem.vue'
import Add from './components/add.vue'
export default {
  name: '',
  components: { TreeItem, Add },
  data() {
    return {
      treeData: [],
      // 存储组织架构原始数据
      initTreeData: [],
      topInfo: {
        name: '传智播客',
        manager: '负责人',
        top: true,
        // 在顶部设置一个id为空
        id: ''
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await companydepartment()
      console.log(res, 999)
      this.treeData = this.changeData(res.data.depts, '')
      this.initTreeData = res.data.depts
      this.topInfo.name = res.data.companyName
    },
    changeData(arr, str = '') {
      return arr.filter((item) => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  display: flex;
  padding: 15px;
  .item {
    display: flex;
    align-items: center;
    .name {
      flex: 1;
    }
    .manager {
      width: 120px;
      margin-right: 20px;
      text-align: right;
    }
  }
}
</style>
